<template>
  <div class="main">
    <div class="process_box">
      <div
        class="process_item"
        v-for="(item,index) in processMsg"
        :key="index"
        :class="getType(item.type)">
        <el-tooltip class="item" effect="dark" :content="item.processName" placement="bottom">
          <div class="process_title">
            <i class="iconfont" :class="'icon-' + getIcon(item.processName)"></i>
            {{item.processName}}
          </div>
        </el-tooltip>
        <div class="process_content" v-if="!(item.type === 'will')">
          <p>{{item.time}}</p>
          <el-row gutter="10">
            <el-col span="12" class="process_text" v-if="!(item.msg.person === '')">{{item.processName}}人：{{item.msg.person}}</el-col>
            <el-col span="12" class="process_text" v-if="!(item.msg.time === '')">{{item.processName}}时间：{{item.msg.time}}</el-col>
            <el-col span="12" class="process_text" v-if="!(item.processName == '申报')">{{item.processName}}意见：{{item.msg.opinion}}</el-col>
            <el-col span="12" class="process_text" v-if="!(item.processName == '申报')">环节状态：
              <span v-if="item.msg.timeOut" style="color:#fe4040;">超期</span>
              <span v-if="!item.msg.timeOut">正常</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProcessDisplay",
  data(){
    return{
      processMsg:[
        {
          processName:'申报',
          time:'2021-08-07 11:08:40',
          type:'done',
          timeOut:false,
          msg:{
            person:'王建国',
            time:'[2021-08-07 11:08:40]',
            opinion:'',
            timeOut:'',
          }
        },
        {
          processName:'受理',
          time:'2021-08-07 11:08:40',
          type:'done',
          timeOut:false,
          msg:{
            person: '高红梅',
            time:'[2021-08-07 11:08:40]',
            opinion: '受理通过',
            timeOut: false,
          },
        },
        {
          processName:'审批',
          time:'2021-08-07 11:08:40',
          type:'doing',
          timeOut:true,
          msg:{
            person: '高红梅',
            time:'[2021-08-07 11:08:40]',
            opinion: '',
            timeOut: true,
          },
        },
        {
          processName:'审核',
          type: 'will',
        },
        {
          processName:'核准',
          type: 'will',
        },
        {
          processName:'办结',
          type: 'will',
        }
      ]
    }
  },
  computed:{
    getType(){
      return function (val){
        switch (val){
          case 'done' :
            return 'item_done'
          case 'doing' :
            return  'item_doing'
          case 'will' :
            return  'item_will'
        }
      }
    },
    getIcon(){
      return function (val){
        switch (val){
          case '申报':
            return 'icon_sb'
          case '受理':
            return 'icon_sl'
          case '审批':
            return 'icon_sp'
          case '审核':
            return 'icon_sh'
          case '核准':
            return 'icon_sh'
          case '办结':
            return 'icon_bj'
          case '预审':
            return 'icon_sp'
          default:
            return 'icon_sp'
        }
      }
    }
  },
  methods:{

  },
  mounted() {
    console.log(this.processMsg[0].msg)
  }
}

import "@/styles/set.scss"
// import "@/styles/form.scss"
import "@/styles/icon/iconfort.scss"
</script>

<style scoped>

.main{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.process_item{
  position: relative;
  display: flex;
  padding-left: 40px;
  margin-bottom: 20px;
}
.process_item:before{
  content: '';
  width: 14px;
  height: 14px;
  position: absolute;
  left: 0;
  border: 2px solid #d3d3d3;
  border-radius: 12px;
  top: 13px;
  background: #fff;
  z-index: 11;
}
.process_item:after{
  content: '';
  width: 0;
  height: calc(100% + 20px);
  border-left: 2px solid #e5e5e5;
  display: block;
  position: absolute;
  left: 6px;
  top: 21px;
  z-index: 10;
}
.process_item:last-child::after{
  display: none;
}
.process_item .process_title{
  width: 160px;
  height: 42px;
  text-align: left;
  line-height: 38px;
  background: #f6f6f6;
  border-radius: 50px;
  border: 2px solid #d3d3d3;
  font-size: 18px;
  color: #868686;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 18px;
}
.process_item .process_title i{
  font-size: 18px;
  margin-right: 5px;
  color: #868686;
}
.process_item .process_content{
  width: 700px;
  margin-left: 20px;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 15px 20px;
  border-radius: 10px;
  position: relative;
}
.process_item .process_content:before{
  content: '';
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #f6f6f6 transparent transparent;
  position: absolute;
  left: -20px;
  top: 10px;
}
.process_item .process_content>p{
  font-size: 18px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dadada;
}
.process_item .process_content .process_text{
  font-size: 18px;
}
.process_item .process_title>svg{
  width: 20px;
  height: 20px;
  fill: #c73e3e;
}
.process_item.item_doing:before {
  border-color: #1e9fff;
}
.process_item.item_doing:after {
  border-left-style: dashed;
  border-left-color: #1e9fff;
}
.process_item.item_doing .process_title{
  background: #1e9fff;
  color: #fff;
  border-color: #1e9fff;
}
.process_item.item_doing .process_title i{
  color: #fff;
}
.process_item.item_doing .process_content{
  background: #e8f3fd;
}
.process_item.item_doing .process_content:before{
  border-color: transparent #e8f3fd transparent transparent;
}
.process_item.item_doing .process_content>p{
  color: #1e9fff;
  border-bottom-color: #cfe0f1;
}
.process_item.item_doing .process_content .process_text{
  color: #1e9fff;
}

.process_item.item_will:before {
  border-color: #1e9fff;
}
.process_item.item_will:after {
  border-left-style: dashed;
  border-left-color: #1e9fff;
}
.process_item.item_will .process_title{
  background: #fff;
  color: #1e9fff;
  border-color: #1e9fff;
}
.process_item.item_will .process_title i{
  color: #1e9fff;
}
</style>
